<template>
	<view class="navList">
		<!-- 图片点击放大 -->
		<popImg @childState="imgshow" v-if="show_img" :vals="childImg"></popImg>
		<view class="nL_head">
			<scroll-view class="nL_head_view" scroll-x="true" :scroll-left="scrollLeft" @scroll="headscroll">
				<view class="nL_head_view_text" v-for="(item,index) in list_nav" :key="item.id"
					@click="cli_head(item, index)">
					<text :class="{nL_head_view_textpicth : navIndex == item.id}">
						{{item.typeName}}
					</text>
					<view class="nL_head_view_btm" :class="{nL_head_view_btmpicth: navIndex == item.id}"
						v-if="11 == 11">
					</view>
				</view>
			</scroll-view>
			<view class="nL_head_view_right">
				<image @click="cli_headImg1" v-if="show_yiji" class="nL_head_view_rightImg" src="https://www.zzzsyh.com/applets/agent/agent/top.png">
				</image>
				<image @click="cli_headImg2" v-else class="nL_head_view_rightImg" src="https://www.zzzsyh.com/applets/agent/agent/right-two.png">
				</image>
				
			</view>
			<!-- 弹层样式 -->
			<view class="nL_head-tc" v-if="show_yiji">
				<uni-grid :column="3" :showBorder="false"  :square="false">
				    <uni-grid-item class="uni-grid-item" :class="[index_yiji == index? 'uni-grid-item-ok' : '']" v-for="(item, index) of list_nav" :key="index">
				        <text class="text" @click="cli_nav_all(item, index)">{{item.typeName}}</text>
				    </uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<!-- 左边导航 -->
		<view class="nL_con">
			<view class="nL_con_left">
				<scroll-view class="nL_con_left_scroll" scroll-y="true" :scroll-top="scrolltop" @scroll="leftscroll">
					<view class="nL_con_leftBox" @click="cli_conLeft(item, index)"
						:class="{nL_con_leftBoxpicth : leftIndex == item.id}" v-for="(item,index) in list_left"
						:key="item.id">
						<!-- <text class="nL_con_leftBox-txt"></text> -->
						<view class="nL_con_leftBox-txt" :class="{nLConLeftBoxTxtPicth : leftIndex == item.id}">
							{{item.typeName}}
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="nL_con_right">
				<view v-if="list_rigtht">
					<uni-grid :column="2" :showBorder="false"  :square="false">
					    <uni-grid-item  v-for="(item,index) in list_rigtht" :key="index">
					        <view class="nL_con_rightLi">
					        	<view class="nL_con_rightLi-top" @click="cli_goyuding(item)">
					        		<image class="nL_con_rightLi-top-img" :src=item.partsImages mode=""></image>
					        	</view>
								<view class="nL_con_rightLi-txt">
									{{item.partsName}}
								</view>
								<!-- <view class="nL_con_rightLi-btn" @click="cli_plsj(item)">
									批量上架到店铺
								</view> -->
					        </view>
					    </uni-grid-item>
					</uni-grid>
				</view>
				<view class="nL_con_right-no">
					<text>没有更多产品了~~</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	export default {
		data() {
			return {
				show_img: false, // 点击图片放大缩小
				childImg: '', // 点击放大的图片
				pid: '',
				sid: '',
				did: '',
				dindex: '',
				list_nav: [],
				list_left: [],
				list_rigtht: [],
				navIndex: '', // nav 下面的黄线隐藏显示
				scrollLeft: '', // 头部滑动距离左边的距离
				scrolltop: '', // 中间块距离头部的距离
				leftIndex: '', // 中间左划款样式
				money: '5.5',
				qdmsg: {
					money: '',
					countNum: ''
				},
				show_yiji: false,
				index_yiji: ''
			}
		},
		onLoad(opts) {
			console.log(opts)
			// 设置导航栏为对应导航
			// this.pid = opts.id
			if (opts.sid) {
				this.navIndex = opts.sid
			} else {
				this.navIndex = ''
			}
			// if (opts.tid) {
			// 	this.leftIndex = opts.tid
			// } else {
			// 	this.leftIndex = ''
			// }
			wx.setNavigationBarTitle({
				title: opts.navName ? opts.navName : '产品分类'
			})
		},
		mounted() {
			// 获取产品分类
			this.get_getPartsTypeByPid();
			// 获取预订清单价格数量
			this.get_getPartsRelNum()
		},
		methods: {
			// 订购数量加减
			cli_sub(val) {
				console.log(val);
				val.value = Number(val.value) - 1
			},
			cli_jia(val) {
				console.log(val);
				val.value = Number(val.value) + 1
			},
			// 点击跳转到预订
			cli_goyuding (item) {
				uni.setStorageSync('factoryId', item.factoryId)
				uni.navigateTo({
					url:'/pages/yuDing/yuDing?id=' + item.id
				})
			},
			// 批量上架到我的店铺
			cli_plsj (item) {
				console.log(item);
				uni.navigateTo({
					url: '/pages/addJia/addJia?id=' + item.id
				})
			},
			// 跳转预订清单
			cli_lookorder() {
				console.log(11111111111);
				uni.navigateTo({
					url: '/pages/inventory/inventory_other'
				})
				// uni.switchTab({
				// 	url: '/pages/inventory/inventory'
				// });
			},
			// 点击添加
			cli_add(e, item, index) {
				this.did = item.id
				this.partsId = this.sid
				this.dindex = index
				let val = item.value
				// let val = 1
				let zeval = /^[0-9]*$/
				if (!zeval.test(val) || val <= 0) {
					uni.showToast({
						title: '请先填写正确预订数量',
						icon: 'none',
						duration: 1000
					});
				} else {
					let id = item.id
					let partsId = item.partsId
					let price = item.attributeSaleprice
					let num = val
					this.put_joinPartsOrderBatch(id, partsId, price, num, index)
				}
			},
			// 加入预订清单 -- 批量
			put_joinPartsOrderBatch(id, partsId, price, num, index) {
				let _that = this
				let params = {}
				params['id'] = id
				params['partsId'] = partsId
				params['price'] = String(price)
				params['num'] = num
				let paramsJson = params
				let partsJson = []
				partsJson.push(paramsJson)
				uni.getStorage({
					key: 'userId',
					success: function(res) {
						console.log(res.data);
						let userId = res.data
						uni.request({
							url: allapi.joinPartsOrderBatch,
							data: {
								userId: userId,
								partsJson: partsJson
							},
							success: (res) => {
								console.log('加入预订清单', res);
								uni.showToast({
									title: '添加成功',
									icon: 'success',
									duration: 1000
								});
								_that.list_rigtht[index].value = ''
								_that.$forceUpdate()
								_that.get_getPartsRelNum() // 重新获取数量价格
							}
						})
					}
				});
			},
			cli_head(item, index) {
				console.log(item, index);
				// this.navIndex = index
				this.navIndex = item.id
				let id = item.id
				this.list_left = []
				this.list_rigtht = []
				this.leftIndex = ''
				this.index_yiji = index
				this.get_getPartsTypeByPidTwo(id)
			},
			cli_headImg() {
				this.scrollLeft += 20
			},
			cli_headImg1 () {
				this.show_yiji = false
			},
			cli_headImg2 () {
				this.show_yiji = true
			},
			// 点击全部一级
			cli_nav_all (item, index) {
				this.index_yiji = index
				this.scrollLeft = Number(index) * 100
				this.navIndex = item.id
				let id = item.id
				this.get_getPartsTypeByPidTwo(id)
				this.show_yiji = false
			},
			cli_conLeft(item, index) {
				console.log(item, index);
				// this.leftIndex = index
				this.leftIndex = item.id
				this.list_rigtht = []
				// this.get_getPartsAttributeUpList(item.id)
				this.get_getPartsList(item.id)
			},
			// 获取产品分类
			get_getPartsTypeByPid() {
				let pid = this.pid
				uni.request({
					url: allapi.getPartsTypeByPid,
					data: {
						pid: pid
					},
					success: (res) => {
						console.log(res.data.data);
						let dat = res.data.data
						this.list_nav = dat
						let navIndex = this.navIndex
						let sid
						if (navIndex) {
							sid = navIndex
							this.get_getPartsTypeByPidTwo(sid, '0000')
						} else {
							sid = dat[0].id
							this.navIndex = dat[0].id
							this.get_getPartsTypeByPidTwo(sid)
						}
						// 获取产品列表 搜索，分类
					}
				})
			},
			get_getPartsTypeByPidTwo(id) {
				// let pid = this.pid
				uni.request({
					url: allapi.getPartsTypeByPid,
					data: {
						pid: id
					},
					success: (res) => {
						console.log(res.data.data);
						let dat = res.data.data
						this.list_left = dat
						let idd = dat[0].id
						this.leftIndex = idd
						this.get_getPartsList(idd)
						// let navIndex = this.navIndex
						// // let sid
						// // if (navIndex) {
						// // 	sid = navIndex
						// // 	this.get_getPartsUpList(sid, '0000')
						// // } else {
						// // 	sid = dat[0].id
						// // 	this.navIndex = dat[0].id
						// // 	this.get_getPartsUpList(sid)
						// // }
						// 获取产品列表 搜索，分类
					}
				})
			},
			// 获取产品列表 搜索，分类
			get_getPartsUpList(secondTypeId, val0) {
				let firstTypeId = this.pid
				uni.request({
					url: allapi.getPartsUpList,
					data: {
						firstTypeId: firstTypeId,
						secondTypeId: secondTypeId
					},
					success: (res) => {
						console.log('产品列表', res.data.data);
						let dat = res.data.data
						this.list_left = dat
						if (dat) {
							let id = dat[0].id
							if (val0) {

							} else {
								this.leftIndex = dat[0].id
							}
							this.get_getPartsAttributeUpList(id)
						}
					}
				})
			},
			// 获取产品
			get_getPartsList (typeId) {
				console.log('或去吧 皮皮虾');
				let _that = this
				// let userId = this.$store.state.userId
				uni.request({
					url: allapi.getPartsList,
					data: {
						typeId: typeId,
						// isHot: isHot,
						// name: name
					},
					success: (res) => {
						console.log('属性列表', res.data.data);
						let dat = res.data.data
						// dat.forEach(v => {
						// 	v.value = ''
						// })
						_that.list_rigtht = dat
				
					}
				})
			},
			// 获取属性列表，根据产品id
			get_getPartsAttributeUpList(partsId) {
				let _that = this
				let userId = this.$store.state.userId
				uni.request({
					url: allapi.getPartsAttributeUpList,
					data: {
						partsId: partsId,
						classification: 5,
						userId: userId
					},
					success: (res) => {
						console.log('属性列表', res.data.data);
						let dat = res.data.data
						dat.forEach(v => {
							v.value = ''
						})
						_that.list_rigtht = dat

					}
				})
			},
			// 获取清单价格数量
			get_getPartsRelNum() {
				let _that = this
				uni.getStorage({
					key: 'userId',
					success: function(res) {
						console.log(res.data);
						let userId = res.data
						uni.request({
							url: allapi.getPartsRelNum,
							data: {
								userId: userId
							},
							success: (res) => {
								console.log('获取数量，价格', res);
								let dat = res.data.data
								_that.qdmsg = dat
							}
						})
					}
				});
			},
			// nav横向滑动距离
			headscroll(e) {
				this.scrollLeft = e.detail.scrollLeft
			},
			// 中间块竖向滑动
			leftscroll() {},
			// 获取用户信息
			getuserinfo(e) {
				console.log(2222, e);
				console.log('获取code', this.$store.state.code);
				let userId = this.$store.state.userId
				console.log(userId);
				let _that = this
				let code = this.$store.state.code
				let encryptDataB64 = e.detail.encryptedData
				let ivB64 = e.detail.iv
				let nickname = e.detail.userInfo.nickName
				let imgUrl = e.detail.userInfo.avatarUrl
				if (userId) {
					console.log('有UserId', userId);
				} else {
					console.log('没有userId');
					uni.request({
						url: allapi.appletsLoginPhone +
							`code=${code}&encryptDataB64=${encryptDataB64}&ivB64=${ivB64}&nickname=${nickname}&imgUrl=${imgUrl}`,
						success: (res) => {
							console.log(res);
							let dat = res.data.data
							_that.$store.commit('setopenid', dat.openid)
							_that.$store.commit('setuserId', dat.id)
							_that.$store.commit('setphone', dat.phone)
						}
					})
				}
			},
			// 点击图片放大缩小
			imgshow(e) {
				// console.log(e);
				this.show_img = false
			},
			cli_img(e) {
				this.show_img = true
				this.childImg = e
			},
		}
	}
</script>

<style scoped>
	.white {
		color: #fff;
	}

	.navList {
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 100%;
		position: absolute;
		justify-content: space-between;
		background: #FFFFFF;
	}

	.nL_head {
		height: 100rpx;
		background: #F7F7F7;
		position: relative;
	}

	.nL_head_view {
		width: 92%;
		overflow: hidden;
		white-space: nowrap;
		display: inline-block;
	}

	.nL_head_view_text {
		width: 200rpx;
		line-height: 60rpx;
		color: #777777;
		font-size: 24rpx;
		display: inline-block;
		margin-top: 20rpx;
		text-align: center;
		font-weight: 400;
	}

	.nL_head_view_btm {
		width: 90rpx;
		height: 6rpx;
		background: #F7F7F7;
		margin-left: 55rpx;
	}

	.nL_head_view_textpicth {
		color: #333333 !important;
		font-size: 26rpx !important;
		font-weight: bold !important;
	}

	.nL_head_view_btmpicth {
		background: #28CD50;
	}

	.nL_head_view_right {
		position: absolute;
		right: 20rpx;
		top: 30rpx;
	}

	.nL_head_view_rightImg {
		width: 32rpx;
		height: 32rpx;
	}
	.nL_head-tc {
		background: #FFFFFF;
		position: absolute;
		z-index: 999;
		width: 100%;
	}
	.uni-grid-item {
		text-align: center;
		height: 64rpx;
		line-height: 64rpx;
		margin: 10rpx 0;
		font-size: 28rpx;
		color: #666666;
		background: none;
	}
	.uni-grid-item-ok {
		background: #EFFBE4;
		color: #28CD50;
		border-radius: 40rpx;
	}
	.nL_con {
		display: flex;
		flex: 1;
		width: 100%;
		overflow: hidden;
		margin-bottom: 10rpx;
	}

	.nL_con_left {
		display: block;
		width: 208rpx;
		background: #F7F7F7;
	}

	.nL_con_left_scroll {
		height: 100%;
	}

	.nL_con_leftBox {
		min-height: 76rpx;
		padding: 20rpx 0rpx;
		font-size: 28rpx;
		color: #777777;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.nL_con_leftBoxpicth {
		color: #333333;
		background: #fff;
		font-weight: bold;
	}

	.nL_con_leftBox-txt {

		width: 100%;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nLConLeftBoxTxtPicth {
		border-left: 8rpx solid #28CD50;
		border-radius: 3rpx;
	}

	.nL_con_right {
		flex: 1;
		overflow: auto;
		position: relative;
		padding-top: 12rpx;
		/* margin-bottom: 150rpx; */
		
	}

	.nL_con_right-no {
		display: flex;
		justify-content: center;
		font-size: 28rpx;
		color: #ccc;
		margin-top: 30rpx;
	}

	.nL_con_rightLi {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 62rpx;
	}
	.nL_con_rightLi-top-img {
		width: 192rpx;
		height: 193rpx;
		border-radius: 12rpx;
	}
	.nL_con_rightLi-txt {
		text-align: center;
		font-size: 28rpx;
		color: #333333;
		font-weight: 400;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		margin-top: 22rpx;
	}
	.nL_con_rightLi-btn {
		width: 184rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		background: #EFFBE4;
		border-radius: 27rpx;
		border: 4rpx solid #28CD50;
		font-size: 20rpx;
		font-weight: 400;
		color: #28CD50;
		margin-top: 16rpx;
	}
	

	/* 输入框样式 */
	.yinput {
		/* width: 224rpx; */
		height: 44rpx;
		border: 1px solid #999999;
		border-radius: 8rpx;
		display: flex;
		flex: 1;
		margin: 0 4rpx;
	}

	.yinput-left {
		width: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-right: 1px solid #999999;
	}

	.yinput-left-img {
		width: 26rpx;
		height: 26rpx;
	}

	.yinput-inptt {
		flex: 1;
		font-size: 28rpx;
		color: #555555;
		display: flex;
		align-items: center;
		text-align: center;
	}

	.yinput-inptt-txt {
		/* margin-left: 8rpx; */
		flex: 1;
	}

	.yinput-right-img {
		width: 26rpx;
		height: 26rpx;
	}

	.yinput-right {
		width: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-left: 1px solid #999999;
	}
</style>
